/*
* @Author: Mess
* @Date:   2016-10-12 10:46:34
 * @Last Modified by: jerry
 * @Last Modified time: 2018-01-18 18:22:53
*/
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  animation-name: slideOutRight;
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  animation-name: slideInRight;
}
@-webkit-keyframes shake{
  0%,100%{
    -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)
  }
  10%,30%,50%,70%,90%{
    -webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)
  }
    20%,40%,60%,80%{
      -webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)
    }
  }
@keyframes shake{
  0%,100%{
    -webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)
  }
  10%,30%,50%,70%,90%{
    -webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)
  }
  20%,40%,60%,80%{
    -webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)
  }
}
.shake{
  -webkit-animation-name:shake;animation-name:shake
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}

